<template>
    <v-chart class="write" :style="style" :forceFit="true" height="400" :data="coverData" :padding="[20, 20, 95, 20]" :scale="scale">
      <v-tooltip  />
      <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
      <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
      <v-legend dataKey="user" marker="circle" :offset="30" />
      <v-coord type="polar" radius="0.8" />
      <v-line position="item*score" color="user" :size="2" />
      <v-point position="item*score" color="user" :size="4" shape="circle" />
    </v-chart>
</template>

<script>

const DataSet = require('@antv/data-set')

const scale = [{
  dataKey: 'score',
  min: 0,
  max: 80
}]

const axis1Opts = {
  dataKey: 'item',
  line: null,
  tickLine: null,
  color: "#FFF",
  grid: {
    color: "#FFF",
    lineStyle: {
      lineDash: null
    },
    hideFirstLine: false
  }
}

const axis2Opts = {
  dataKey: 'score',
  line: null,
  tickLine: null,
  color: "#FFF",
  grid: {
    type: 'polygon',
    color: "#FFF",
    lineStyle: {
      lineDash: null
    }
  }
}

export default {
  name: 'Radar',
  props: ['myCover'],
  data () {
    return {
      axis1Opts,
      axis2Opts,
      scale,
      cover: this.myCover,
      style: {
        color: "#FFF"
      }
    }
  },
  computed: {
    sourceData: function () {
      return [
        {item: 'CO', 当前设备: this.cover.co, 正常值: 20, color: "#FFF"},
        {item: 'CH4', 当前设备: this.cover.ch4, 正常值: 25, color: "#FFF"},
        {item: '温度', 当前设备: this.cover.temp, 正常值: 35, color: "#FFF"},
        {item: '俯仰角', 当前设备: this.cover.pitch, 正常值: 6.5, color: "#FFF"},
        {item: '耗电量', 当前设备: this.cover.roll, 正常值: 40, color: "#FFF"},
        {item: '湿度', 当前设备: this.cover.hum, 正常值: 48, color: "#FFF"}
      ]
    },
    dv: function () {
      return new DataSet.View().source(this.sourceData)
    },
    coverData: function () {
      return this.dv.transform({
        type: 'fold',
        fields: ['当前设备', '正常值'],
        color: "#FFF",
        key: 'user',
        value: 'score'
      }).rows
    }
  },
  methods: {
  },
}
</script>

<style scoped>
.write {
  color: #fff2e8 !important;
  font-size: 22px;
}
</style>
